<template>
  <div class="sellclothes-box">
    <div class="sellclothes-content">
      <h1 class="sellclothes-h1">
        <p class=".p1">已开放地区:北京、上海、深圳、广州、浙江省、江苏省</p>
        <p>单件估价，好衣回收</p>
      </h1>
      <h2
        class="sellclothes-h2" 
        v-for="sellcloths in sellcloth"
        :key="sellcloths.id"
      >
        <li>
          <img :src="sellcloths.url" />
          <p>
            <span>{{ sellcloths.name }}</span>
          </p>
        </li>
        </h2>
      <h3 class="sellclothes-h3">
        <p>认真对待每件衣物</p>
        <p>每件衣服经过专业清洗后二次销售</p>
        <img src="@/assets/img/clothtu.png" alt="" />
      </h3>
      <h4 class="sellclothes-h4">
        <div class="sellclothes-h41">常见疑问</div>
        <p>
          <span>Q：不收哪些?</span>
          <span
            >有污渍、破损、变形的衣服不收购;非正品服装不收。以及这些品类也不收购:</span
          >
        </p>
        <ul class="tuwen">
          <li>
            <img src="@/assets/img/clothb1.png" alt="" />
            <span>奢侈品</span>
          </li>
          <li>
            <img src="@/assets/img/clothb2.png" alt="" />
            <span>内衣裤</span>
          </li>
          <li>
            <img src="@/assets/img/clothb3.png" alt="" />
            <span>童装</span>
          </li>
          <li>
            <img src="@/assets/img/clothb4.png" alt="" />
            <span>包袋配饰鞋子</span>
          </li>
        </ul>
        <p>
          <span>Q:目前支持哪些区域的收购服务?</span>
          <span>暂时只支持北京、上海、深圳、广州、浙江省、江苏省邮寄。</span>
        </p>
        <p>
          <span>Q:卖衣服的物流费用谁承担?</span>
          <span>卖衣服物流费用全部由多抓鱼承担，我们会安排顺丰上门取件。</span>
        </p>
        <p>
          <span>Q:如何收到卖衣服的钱?</span>
          <span
            >快递签收后，我们会在1-3天内完成衣服的审核。审核完成后，会将审核结果发送给你。在订单详情页确认审核结果或提交取回订单后，收购费用将即刻打到你的多抓鱼账户。进入「我的–钱包」查看余额，可以随时提现到微信钱包，或用来购买多抓鱼的其他商品。</span
          >
        </p>
      </h4>
      <h5 class="sellclothes-h5">
        <span>详细的收购规则</span>
        <i class="iconfont icon-24gl-arrowRight2"></i>
      </h5>
      <div class="empty"></div>
    </div>
    <h6 class="sellclothes-h6">提交衣服看估价</h6>
  </div>
</template>
<script>
export default {
  name: "Sellclothes",
  data() {
    return {
      sellcloth: [],
    };
  },
  created() {
    let xhr = new XMLHttpRequest();
    xhr.open("get", "http://localhost:3000/sellcloth", true);
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        this.sellcloth = JSON.parse(xhr.responseText);
      }
    };
    xhr.send();
  },
};
</script>
<style scoped>
.Sellclothes-box {
  height: auto;
  background-color: rgb(142, 77, 226);
  font-size: 30px;
}
.sellclothes-content {
  margin-bottom: 2rem;
}
.empty {
  height: 1.8rem;
}
.sellclothes-h1 {
  height: 1.1rem;
  background-color: rgb(236, 158, 158);
}
.sellclothes-h1 p:nth-child(1) {
  font-size: 14px;
  height: 0.4rem;
  background-color: #dde9dd;
  color: #79c774;
  text-align: center;
  line-height: 0.4rem;
}
.sellclothes-h1 p:nth-child(2) {
  height: 0.7rem;
  background-color: #fff;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  line-height: 1rem;
}
.sellclothes-h2 li {
  height: 1.68rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #999;
}
.sellclothes-h2 li img {
  width: 1.3rem;
  height: 1.1rem;
}
.sellclothes-h2 li p {
  font-size: 26px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 1.1rem;
}
.sellclothes-h2 li p span:nth-child(2) {
  font-size: 16px;
  color: rgb(41, 58, 23);
}
.sellclothes-h3 {
  text-align: center;
  height: 3.6rem;
}
.sellclothes-h3 p:nth-child(1) {
  background-color: #fff;
  padding: 0.3rem 0 0.1rem 0;
  font-size: 26px;
  font-weight: 700;
}
.sellclothes-h3 p:nth-child(2) {
  font-size: 18px;
  color: #999;
  padding-bottom: 0.3rem;
}
.sellclothes-h3 img {
  width: 3.2rem;
  height: 2.2rem;
}
.sellclothes-h4 {
  height: 6.3rem;
}
.sellclothes-h4 .sellclothes-h41 {
  height: 0.6rem;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  line-height: 0.6rem;
}
.sellclothes-h4 p {
  padding: 0.15rem 0.1rem 0 0.1rem;
}
.sellclothes-h4 p span:nth-child(1) {
  font-size: 18px;
  font-weight: 700;
  display: block;
  padding-bottom: 0.05rem;
}
.sellclothes-h4 ul {
  padding: 0.3rem 0 0.1rem 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.sellclothes-h4 ul li {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.sellclothes-h4 ul li img {
  width: 0.55rem;
  height: 0.55rem;
  margin-bottom: 0.1rem;
}
.sellclothes-h5 {
  font-size: 18px;
  margin: 0 0.1rem;
  height: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgb(35, 117, 35);
  border-top: 0.01rem solid #999;
  border-bottom: 0.01rem solid #999;
}
.sellclothes-h5 .iconfont {
  font-weight: 700;
  font-size: 26px;
}
.sellclothes-h6 {
  font-size: 20px;
  width: 2rem;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  background-color: rgb(10, 65, 35);
  color: #fff;
  border-radius: 0.3rem;
  position: fixed;
  bottom: 0.8rem;
  left: 50%;
  margin-left: -1rem;
}
</style>